<template>
  <Nav />
  <van-cell-group inset>
    <van-field v-model="name" label="修改用户名" placeholder="请输入用户名" />
    <van-field label="用户头像">
      <template #input> <van-uploader v-model="pic" :max-count="1"/></template>
    </van-field>
  </van-cell-group>

  <van-button
    round
    block
    type="primary"
    :loading="loading"
    loading-text="处理中..."
    @click="submit"
    >修改信息</van-button
  >
</template>

<script>
import { reactive, toRefs } from "vue";
import Nav from "@/components/Nav.vue";
import { useStore } from "@/store/index";
import { useRouter } from "vue-router";
import api from "@/api/index";
import { Toast } from "vant";
export default {
  components: { Nav },
  name: "UpdatePerson",
  setup() {
    const router = useRouter(),
      store = useStore();

    let { name } = store.info;
    let state = reactive({
      name,
      pic: [],
      loading: false,
    });
    const submit = async () => {
      if (state.loading) return;
      state.loading = true;
      let { name, pic } = state,
        reg = /^[\w\u4e00-\u9fa5]+$/;

      if (!reg.test(name)) {
        Toast("小主，用户名输入错误~");
        return;
      }
      if (pic.length === 0) {
        Toast("小主，必须上传一张图片~");
        return;
      }
      console.log(name, pic, "ss");
      // if (!isLogin) {
      //   Toast("请先登录");
      //   return;
      // }
      let { code } = await api.userUpdate(name, pic[0].file);
      if (+code == 0) {
        Toast("修改成功");
        store.changeInfoAsync();
        router.replace("/person");
        state.loading = false;
      }
      // console.log(data);
    };

    return { ...toRefs(state), submit };
  },
};
</script>

<style>
.form-box {
  margin-top: 30px;
}
</style>
